<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局</title>
    <link rel="stylesheet" href="../css/grid.css">
    <!-- <style>
        .mj{
            width: 800px;
            height: 800px;
            background-color: antiquewhite;
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr 1fr; */
            /* 重复写 */
            /* grid-template-columns: repeat(5,1fr); */
            /* 一次性写 */
            grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
            /* 响应式布局 */
            margin: 0 auto;
            gap: 30px;
        }
        .mj1{
            height: 120px;
            background-color: aqua;
            display: flex;
          
            
         text-align: center;
       

        }
    </style> -->
</head>
<body>
   
    <div class="mj">
        
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>
        <div class="mj1">盒子</div>

        
    </div>
</body>
</html>